<template>
	<p id="hitokoto"><a href="#" id="hitokoto_text">少壮不努力，老大徒伤悲。</a></p>
	<div id="aplayer"></div>
	<div class="footer_copy_right">
		Copyright ©2020 - {{year}} 版权属逸曦穆泽所有 <a href="http://beian.miit.gov.cn/">粤ICP备2020125657号</a>
	</div>
</template>

<script>
	import { ref,onMounted } from 'vue'
	import 'APlayer/dist/APlayer.min.css';
	import APlayer from 'APlayer';
	import axios from 'axios' // 引入axios的第三方插件
	export default {
		setup() { 
			const year = ref(new Date().getFullYear())
			onMounted(()=>{
				// 音乐播放
				const ap = new APlayer({
					container: document.getElementById('aplayer'),
					fixed: true,
					// autoplay: false,
					audio: {
						name: '歌名',
						artist: '歌手名',
						url: '../../public/audio/toaiji.mp3',
						cover: '../../public/image/mark.png',
					}
				});
				// 一言
				axios.get('https://v1.hitokoto.cn')
					.then(({ data }) => {
					  const hitokoto = document.getElementById('hitokoto_text')
					  hitokoto.href = 'https://hitokoto.cn/?uuid=' + data.uuid
					  hitokoto.innerText = data.hitokoto
					})
					.catch(console.error);
			});
			return { year }
		},
	}
</script>

<style>
	#hitokoto{text-align: center;}
	#hitokoto_text{font-size: 24px;color: orangered;}
	.footer_copy_right{padding:20px 0 10px;margin-bottom:10px;margin-left:5%;}
	.footer_copy_right a{color:#555;text-decoration: none;}
	.footer_copy_right a:hover{color:#ee3333;}
</style>
